import React, { Component } from 'react'

import '../assets/css/login.less'
import KLogo from '../components/KLogo'

import KInput from '../components/KInput'
import KButton from '../components/KButton'

import { hashHistory } from 'react-router'
export default class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: ''
        }
    }
    changeHandle(val) {
        this.setState({
            phone: val
        })
    }
    loginClick() {
        // 本来是要发请求的，但是现在是没有接口的
        // 在发请求之前要验证一下手机号是否合理之类的
        if (!/^[1]\d{10}$/.test(this.state.phone)) {
            // return toust
        }

        // 直接跳转
        hashHistory.push({
            pathname: '/home'
        })
    }
    render() {
        return (
            <div className="login-box">
                <KLogo />
                <KInput type="text" className="mt20" icon="icon-shouji" placeholder="手机号码" value={this.state.phone} onChange={this.changeHandle.bind(this)} />
                <KInput type="password" className="mt20" icon="icon-mima" placeholder="密码" />
                <KButton className="mt20" onClick={this.loginClick.bind(this)}>登录</KButton>
                <p className="forget">忘记密码</p>
                <div className="group">
                    <KButton>免费注册</KButton>
                    <KButton>游客登录</KButton>
                </div>
            </div>
        )
    }
}
